<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wrap">
        <h2>模拟封装jQuery</h2>
        <div class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
        </div>
    </div>
</body> 
<script>
        // 封装一个方法 以便快速的操作一个或多个元素

        // 单元素操作 => 直接操作元素 
            // var wrap = document.getElementById("wrap");
            // wrap.innerHTML = "周宇";
        // 多元素操作 =>  遍历集合操作元素
            // var liList = document.querySelectorAll(".list li");
            // for(var i = 0; i < liList.length; i++){
            //     liList[i].innerHTML = `周宇${i}`;
            // }

        // =>  统一用document.querySelectorAll()   => 传入一个css选择器 => 返回一个集合

        // 面向过程
            // var eles = document.querySelectorAll(".list li");
            // for (let i = 0; i < eles.length; i++) {
            //     eles[i].innerHTML = "123123";
            // }

</script>
<script>
    // 工厂模式
        function getEle(selector) {
            return {
                eles:document.querySelectorAll(selector),
                // 设置/获取元素 的 html结构
                // html(123123)   设置
                // html()         获取
                html(con){
                    if(arguments.length >= 1) {
                        for(let i = 0; i < this.eles.length; i++){
                            this.eles[i].innerHTML = con;
                        }
                    } else {
                        return this.eles[0].innerHTML;
                    }
                }
            }
        }
        var $li = getEle(".list li");
        $li.html("hello world");

        var $h2 = getEle("#wrap h2");
        $h2.html("嘿,下课了");

    
</script>
</html>